<template>
  <el-container>
    <el-header>
      <div class="headerDiv">
        <div>
          <img src="../assets/logo.png" alt="" />
        </div>

        <div><h3>院运会后台管理系统</h3></div>
        <div>
          <el-button type="primary" size="mini" @click="loginOut">
            退出
          </el-button>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside>
        <el-menu router collapse-transition unique-opened>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-goods" />分类
            </template>
            <el-menu-item-group>
              <el-menu-item index="/categroes/create">
                新建分类
              </el-menu-item>
              <el-menu-item index="/categroes/list">
                分类列表
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!-- <el-submenu index="2">
            <template
              slot="title"
            >
              <i class="el-icon-message" />物品
            </template>
            <el-menu-item-group>
              <el-menu-item index="/items/create">
                新建物品
              </el-menu-item>
              <el-menu-item index="/items/list">
                物品列表
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template
              slot="title"
            >
              <i class="el-icon-message" />英雄
            </template>
            <el-menu-item-group>
              <el-menu-item index="/heroes/create">
                新建英雄
              </el-menu-item>
              <el-menu-item index="/heroes/list">
                英雄列表
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu> -->
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-user-solid" />管理员
            </template>
            <el-menu-item-group>
              <el-menu-item index="/admin_users/create">
                新建管理员
              </el-menu-item>
              <el-menu-item index="/admin_users/list">
                管理员列表
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-s-cooperation" />班级管理
            </template>
            <el-menu-item-group>
              <el-menu-item index="/class/create">
                新建班级
              </el-menu-item>
              <el-menu-item index="/class/list">
                班级列表
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-s-custom" />学生管理
            </template>
            <el-menu-item-group>
              <el-menu-item index="/student/create">
                新建学生
              </el-menu-item>
              <el-menu-item index="/student/list">
                学生列表
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="7">
            <template slot="title">
              <i class="el-icon-s-tools" />比赛项目
            </template>
            <el-menu-item-group>
              <el-menu-item index="/sportItem/create">
                新建比赛项目
              </el-menu-item>
              <el-menu-item index="/sportItem/list">
                比赛项目列表
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="8">
            <template slot="title">
              <i class="el-icon-s-finance" />报名管理
            </template>
            <el-menu-item-group>
              <el-menu-item index="/apply/create">
                新建报名
              </el-menu-item>
              <el-menu-item index="/apply/list">
                报名列表
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="/sportManage">
            <i class="el-icon-s-management" />
            <span slot="title">比赛管理</span>
          </el-menu-item>
          <el-menu-item index="/sportSearch">
            <i class="el-icon-s-platform" />
            <span slot="title">成绩查询</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main><router-view :key="$route.path"/></el-main>
        <el-footer>
          <div><span>Copyright © 2021-2021 虾尾君</span></div>
        </el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {};
  },

  created() {},
  methods: {
    loginOut() {
      sessionStorage.token = "";
      this.$router.go(0);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-header {
  height: 50px !important;
  background-color: #a9b6cb;
  img {
    height: 50px;
  }
}
.el-aside {
  height: 100%;
  width: 180px !important;
  background-color: #ebeff7;
}
.el-main {
  height: 100%;
  width: 100%;
  overflow: auto;
}
.el-footer {
  height: 50px !important;
  // padding: 0 20px;
  text-align: center;
}

.headerDiv {
  display: flex;
  :nth-child(2) {
    margin: 12px 0 0 1rem;
  }
  :nth-child(3) {
    margin: 12px 0 0 68vw;
  }
}
.el-menu {
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 0;
  background-color: #ebeff7;
}
</style>
